<script lang="ts" setup>
import Arrow_3 from "@/assets/docs/arrow_3.svg"
import useVoiceModel from "@/hooks/useVoiceModel"
import { useDigitalStore } from "@/store/modules/digital"
import { storeToRefs } from "pinia"
import { reactive, ref } from "vue"

const emits = defineEmits(["onRadioValue"])

const modelArr = ref<string[]>(["BARD", "AU", "CHAT"])
const radioValue = ref<string>("")
const loading = ref<boolean>(false)

const digitalStore = useDigitalStore()
digitalStore.upDataVoiceList()

const { AU, CHAT, BARD } = storeToRefs(digitalStore)

const state = reactive({
  BARD: BARD,
  AU: AU,
  CHAT: CHAT
})

const onRadioValue = (id: any, model: any) => {
  // @ts-ignore
  const newList = state[model].list.filter((e) => +e.id === +id)
  emits("onRadioValue", newList[0])
}
</script>

<template>
  <div class="app-container" v-loading="loading">
    <div class="m-20" v-for="(model, index) in modelArr" :key="index">
      <div class="dflex">
        <img :src="Arrow_3" alt="" srcset="" />
        <div class="ml-10">{{ model }}</div>
      </div>

      <el-radio-group
        fill="#333"
        text-color="#333"
        @change="onRadioValue($event, model)"
        v-model="radioValue"
        class="justify-content-between"
      >
        <!-- @vue-ignore -->
        <el-radio :label="item.id" border v-for="(item, index) in state[model].list" :key="index">
          {{ item.name }}</el-radio
        >
      </el-radio-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-radio-group {
  margin-top: 10px;

  // justify-content: space-between;
  .el-radio {
    margin: 5px;
  }
}

.el-radio {
  margin: 5px 2px;
  min-width: 100px;
  background: #f9f9f9;
  border-color: #f9f9f9 !important;

  :deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #f9f9f9;
    background: #333;
  }

  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #333;
  }
}
</style>
